<template>
  <el-container>
    <el-main>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-tabs
              v-model="activeName"
              @tab-click="handleClick"
              :tab-position="tabPosition"
              type="card"
            >
              <el-tab-pane label="鑫途化工园区" name="first">
                <div id="divPlugin" class="plugin">鑫途数据</div>
                <div style="width: 30%">
                  <el-col
                    :span="11"
                    v-for="(o, index) in 8"
                    :key="o"
                    :offset="index > 0 ? 2 : 0"
                  >
                    <el-card :body-style="{ padding: '0px' }">
                      <div class="smallBox"></div>
                    </el-card>
                  </el-col>
                </div>
              </el-tab-pane>
              <el-tab-pane label="富宁化工园区" name="second">
                <div id="divPlugin1" class="plugin">富宁化工园区暂无数据</div>
                <div style="width: 30%">
                  <el-col
                    :span="11"
                    v-for="(o, index) in 8"
                    :key="o"
                    :offset="index > 0 ? 2 : 0"
                  >
                    <el-card :body-style="{ padding: '0px' }">
                      <div class="smallBox"></div>
                    </el-card>
                  </el-col></div
              ></el-tab-pane>
              <el-tab-pane label="宏昌化工园区" name="third">
                <div id="divPlugin2" class="plugin">宏昌化工园区暂无数据</div>
                  <el-col
                    :span="11"
                    v-for="(o, index) in 8"
                    :key="o"
                    :offset="index > 0 ? 2 : 0"
                  >
                    <el-card :body-style="{ padding: '0px' }">
                      <div class="smallBox"></div>
                    </el-card>
                  </el-col>
                  </el-tab-pane>
            </el-tabs>
          
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import { WebVideoCtrl } from "../static/webVideoCtrl.js";
export default {
  name: "HelloWorld",
  props: {},
  data() {
    return {
      activeName: "first",
      tabPosition: "left",
      hkvInfo: {
        ip: "1.1.1.1", //海康威视摄像头/硬盘录像机的ip地址
        port: "81", //海康威视摄像头/硬盘录像机的端口
        username: "admin", //海康威视摄像头/硬盘录像机的用户名
        password: "admin12345", //海康威视摄像头/硬盘录像机的密码
        channels: [], //海康威视摄像头/硬盘录像机的通道
      },
      mySelectWnd: 0, //当前选中的窗口
      g_bPTZAuto: false,
      iProtocol: 1,
      loginLoading: false,
      startPlayLoading: false,
      iStreamType: 1,
      bZeroChannel: false,
      iRtspPort: 0,
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onLogin() {
      var that = this;
      that.loginLoading = true;

      // 登录设备
      WebVideoCtrl.I_Login(
        that.hkvInfo.ip,
        that.iProtocol,
        that.hkvInfo.port,
        that.hkvInfo.username,
        that.hkvInfo.password,
        {
          async: false,
          success: function (xmlDoc) {
            console.log("xmlDoc2", xmlDoc); //不能删除
            //TODO 获取通道信息
            that.getChannelInfo();
            that.getDevicePort(that.hkvInfo.ip + "_" + that.hkvInfo.port);
            that.loginLoading = false;

            that.$message({
              showClose: true,
              message: "登录成功",
              type: "success",
            });
          },
          error: function () {
            that.loginLoading = false;
            that.$message({
              showClose: true,
              message: "登录失败",
              type: "error",
            });
          },
        }
      );
    },
    getDevicePort: function (szDeviceIdentify) {
      var oPort = WebVideoCtrl.I_GetDevicePort(szDeviceIdentify);
      this.iRtspPort = oPort.iRtspPort;
    },
    // 获取通道，实际上可以根据自己的项目，获取数字通道，模拟通道，零通道中的一个或多个，不用全部获取（提高效率）
    getChannelInfo: function () {
      var that = this;
      var szDeviceIdentify = this.hkvInfo.ip + "_" + this.hkvInfo.port;
      // debugger
      // 数字通道
      that.hkvInfo.channels = [];
      WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
        async: false,
        mysuccess: function (xmlStr) {
          console.log("mysuccess I_GetDigitalChannelInfo: ", xmlStr);
          var jsonObj = that.$x2js.xml2js(xmlStr);
          var list =
            jsonObj.InputProxyChannelStatusList.InputProxyChannelStatus;
          for (var x = 0; x < list.length; x++) {
            that.hkvInfo.channels.push(list[x].id);
          }
        },
        success: function (xmlDoc) {
          console.log(xmlDoc);
        },
        error: function (status, xmlDoc) {
          console.log("获取数字通道失败" + status, xmlDoc);
        },
      });
      // TODO 模拟通道
      // 模拟通道
      WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
        async: false,
        mysuccess: function (xmlStr) {
          var jsonObj = that.$x2js.xml2js(xmlStr);
          console.log("模拟通道mysuccess", xmlStr);
          // var list = jsonObj.VideoInputChannelList;
          // for (var x = 0; x < list.length; x++) {
          //   that.hkvInfo.channels.push(list[x].VideoInputChannel.id);
          // }
          var id = jsonObj.VideoInputChannelList.VideoInputChannel.id;
          that.hkvInfo.channels.push(id);
        },
        success: function (xmlStr) {
          console.log("模拟通道success", xmlStr);
        },
        error: function (status, xmlDoc) {
          console.log("模拟通道error", xmlDoc, "模拟通道status", status);
        },
      });
      // TODO 零通道
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-container,
.el-main,
.el-row,
.el-col-24,
.grid-content,
.el-tabs {
  width: 100%;
  height: 100%;
}

.el-col-offset-2 {
  margin-left: 0;
}
.el-tab-pane {
  display: flex;
}
.plugin {
  margin: 0 50px;
  width: 70%;
  height: calc(100%-60px);
}
.smallBox {
  background: #99a9bf;
  width: 200px;
  height: 100px;
}
.el-tabs--left.el-tabs--card .el-tabs__nav {
  border-bottom: none;
}
.el-tabs__nav-scroll {
  background: #3681cc !important;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple-light {
  background: #e5e9f2;
}

</style>
